<template>
  <div>
    <div class="root">
      <van-nav-bar title="活动地址" left-arrow @click-left="onClickLeft" />
      <div class="context">
        <van-form class="van-form" @submit="onSubmit">
          <van-field name="radio" label="单选框">
            <template #input>
              <van-radio-group
                @change="radioChangeFUn"
                v-model="radio"
                direction="horizontal"
              >
                <van-radio checked-color="#f3b361" icon-size="14px" name="1"
                  ><span>线下活动</span></van-radio
                >
                <van-radio checked-color="#f3b361" icon-size="14px" name="2"
                  ><span>线上活动</span></van-radio
                >
              </van-radio-group>
            </template>
          </van-field>
          <div v-show="isShowAddressInput">
            <van-field
              readonly
              clickable
              name="area"
              :value="areaAddress"
              label="地区选择"
              placeholder="点击选择省市区"
              @click="showAddressPop = true"
              :rules="[{ required: true, message: '请输选择地区' }]"
            />
            <van-popup v-model="showAddressPop" position="bottom">
              <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showAddressPop = false"
              />
            </van-popup>

            <van-cell-group>
              <van-field
                v-model="addressSmall"
                label="文本"
                placeholder="请输入详细地址"
                :rules="[{ required: true, message: '请输输入详细地址' }]"
              />
            </van-cell-group>
          </div>
          <div class="subMit-button">
            <van-button
              class="subMit-buttonIcon"
              :color="
                (
                  radio == '1'
                    ? areaAddress != '' && addressSmall != ''
                    : radio != ''
                )
                  ? '#f3b361'
                  : '#b5b5b5'
              "
              block
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      //地区列表
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市",
        },
        city_list: {
          110100: "北京市",
          120100: "天津市",
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          // ....
        },
      },
      //地址弹层显示
      showAddressPop: false,
      //单选框
      radio: "1",
      //根据radio是否显示地址输入框
      isShowAddressInput: true,
      // -------
      //表单绑定的，显示的地址值
      areaAddress: "",
      //地址选择器栏显示
      showArea: false,

      // ------
      //详细地址
      addressSmall: "",
    };
  },
  created() {
    if (this.radio != "1") {
      this.isShowAddressInput = false;
    }
  },
  methods: {
    onConfirm(values) {
      this.valuareaAddresse = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showAddressPop = false;
      this.areaAddress = this.valuareaAddresse;
    },

    //校验成功传递值和场景变换
    onSubmit() {
      if (this.radio == "1") {
        this.$emit(
          "setAddressRuleSuccess",
          this.radio,
          this.areaAddress,
          this.addressSmall
        );
      } else {
        this.$emit("setAddressRuleSuccess", this.radio);
      }
      //清空数据
      this.areaAddress = "";
      this.addressSmall = "";
    },
    onClickLeft() {
      this.$emit("setAddressSceneChange");
    },
    //单选框狂改变触发
    radioChangeFUn(e) {
      if (e == 1) {
        this.isShowAddressInput = true;
      } else {
        this.isShowAddressInput = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@cell-horizontal-padding: 10000px;
.root {
  width: 750px;
  height: 1993px;
  margin: 0 auto;
  font-size: 30px;
  background: #f7f7f7;
}
.context {
  width: 698px;
  height: 320px;
  margin: 0 auto;
  margin-top: 20px;
  width: 698px;

  border-radius: 12px;
  background: #ffffff;
}
.van-form {
  padding-left: 24px;
}
.van-form span {
  font-size: 26px;
}
.subMit-button {
  margin: 0 auto;
  height: 173px;
  width: 323px;
  margin-top: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}
.subMit-buttonIcon {
  display: block;
  margin: 0 auto;
  width: 323px;
  height: 92px;
}
</style>
